<!-- @/components/main/ProjectOverview.vue -->
<template>
  <div class="component-content">
    <h3 class="component-title">项目概览面板CostSetting</h3>
    <div class="component-body">
      <div class="stats-container">
        <div class="stat-card">
          <div class="stat-title">总项目数</div>
          <div class="stat-value">24</div>
        </div>
        <div class="stat-card">
          <div class="stat-title">活动项目</div>
          <div class="stat-value">18</div>
        </div>
        <div class="stat-card">
          <div class="stat-title">本月成本</div>
          <div class="stat-value">$12,456</div>
        </div>
        <div class="stat-card">
          <div class="stat-title">预算使用率</div>
          <div class="stat-value">68%</div>
        </div>
      </div>

      <div class="project-list">
        <div class="project-item" v-for="i in 5" :key="i">
          <el-icon><Folder /></el-icon>
          <span class="project-name">Project {{ i }}</span>
          <div class="project-status">Active</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Folder } from '@element-plus/icons-vue'
</script>

<style scoped>
.component-content {
  height: 100%;
}

.component-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.stats-container {
  display: flex;
  gap: 20px;
  margin-top: 15px;
  margin-bottom: 25px;
}

.stat-card {
  background: white;
  border-radius: 6px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
}

.project-list {
  border-radius: 6px;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 15px;
}

.project-item {
  display: flex;
  align-items: center;
  padding: 12px 10px;
  border-bottom: 1px solid #f0f2f5;
}

.project-item:last-child {
  border-bottom: none;
}

.project-name {
  margin-left: 10px;
  flex: 1;
}

.project-status {
  background-color: #f0f9eb;
  color: #67c23a;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 12px;
}
</style>
